<template>
  <el-menu
    :default-active="'/index'"
    router
    mode="horizontal"
    background-color="white"
    text-color="#222"
    active-text-color="#409EFF"
    style="min-width: 1300px"
    v-if="falg"
  >
    <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
      {{ item.navItem }}
    </el-menu-item>

    <a
      href="#nowhere"
      @click="drawer = true"
      type="primary"
      style="color: #222; float: right; padding: 20px"
      >设置</a
    >
    <i
      class="el-icon-menu"
      style="float: right; font-size: 45px; color: #222; padding-top: 8px"
    ></i>
    <el-drawer
      title="个人设置"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div @click="recover">
        <span>
          <el-avatar :src="cover" @click="getusername" :size="100"></el-avatar>
        </span>
      </div>

      <div @click="reusername">
        <p>用户姓名：{{ username }}</p>
      </div>

      <!-- <div>
        <el-button type="primary" round @click="changpassword">修改用户名</el-button>
      </div> -->
      <div>
        <el-switch v-model="value1" inactive-text="声音"> </el-switch>
      </div>
      <div>
        <el-button
          type="primary"
          class="xiugaimima"
          plain
          @click="changpassword"
          >修改密码</el-button
        >
      </div>

      <el-button type="primary" class="tuichudenglu" plain v-on:click="finish"
        >退出登录</el-button
      >

      <div>
        <el-button
          type="primary"
          class="zhuxiaozhanghao"
          plain
          v-on:click="destory"
          >注销账号</el-button
        >
      </div>

      <div class="pingjia">
        <span class="demonstration">感谢支持,来评价一下我们吧！</span>
        <el-rate v-model="value2" :colors="colors" show-text> </el-rate>
      </div>
    </el-drawer>
    <span
      style="
        position: absolute;
        padding-top: 20px;
        right: 43%;
        font-size: 20px;
        font-weight: bold;
      "
      >Lcz - Your Mind Palace</span
    >
    <ResueName ref="reu"></ResueName>
    <Recover ref="rec"></Recover>
  </el-menu>
</template>

<script >
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";
import Recover from "../library/Recover.vue";
import ResueName from "../library/ResueName.vue";

import { log } from "console";

export default {
  name: "NavMenu",
  indect: ["reload"],
  data() {
    return {
      navList: [
        { name: "/index", navItem: "首页" },
        { name: "/jotter", navItem: "笔记本" },
        { name: "/library", navItem: "图书馆" },
        { name: "/personalpage", navItem: "个人中心" },
      ],
      value1: true,
      drawer: false,
      direction: "rtl",
      username: "",
      cover: "",
      falg: false,
      busdata: "",
      value2: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    };
  },

  mounted: function () {
    this.getusername();
    this.getcover();

  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    getusername() {
      this.$axios.get("/getusername").then((resp) => {
        sessionStorage.setItem('username', resp.data)
        this.username=sessionStorage.getItem('username')
        console.log(this.username);
        console.log(resp.data);
        console.log("触发");
      });
    },
    finish() {
      this.$axios
        .get("/logout")
        .then((resp) => {
          if (resp.data.code === 200) {
            this.$router.replace({ path: "/login" });
          }
        })
        .then(this.open2());
    },
    getcover() {
      this.$axios.get("/getcover").then((resp) => {
        sessionStorage.setItem('cover', resp.data)
       this.cover=sessionStorage.getItem('cover')
        console.log(resp.data);
      });
    },
    changpassword() {
      this.$router.replace({ path: "/changpassword" });
    },
    destory() {
      var user = JSON.parse(window.sessionStorage.getItem("user"));
      console.log(user);
      let data = new FormData();
      data.append("username", user.username);
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.post("/destory", data).then(() => {
            this.$router.replace({ path: "/login" }).then(this.open1());
          });
        })
        .catch(() => {
          this.$message({
            type: "success",
            message: "已取消删除",
          });
        });
    },

    reusername() {
      this.$refs.reu.dialogVisible = true;
      console.log(11111);
    },
    recover() {
      this.$refs.rec.dialogVisible = true;
      console.log(22222);
    },
    reloads() {
      this.reload();
    },
    open1() {
      this.$notify({
        title: "注销成功",
        // message: '欢迎使用图书管理系统',
        type: "success",
      });
    },
    open2() {
      this.$notify({
        title: "退出成功",
        // message: '欢迎使用图书管理系统',
        type: "success",
      });
    },
  },
  created() {
    this.busdata = sessionStorage.getItem("busdata");
    if (this.busdata == 200) {
      this.falg = true;
    } else if (this.busdata == 201) {
      this.falg = false;
    }
    console.log(this.falg);
  },
  components: { ResueName, Recover },
};
</script>


<style scoped>
a {
  text-decoration: none;
}

span {
  pointer-events: none;
}
.pingjia {
  position: absolute;
  margin-top: 595px;
  margin-left: 150px;
}
.exit-account {
  position: absolute;
  margin-top: 532px;
  margin-left: -39px;
}
/* button.el-button.el-button--primary.is-round {
  position: absolute;

  margin-top: 470px;
    margin-left: -41px;

} */
.xiugaimima {
  position: absolute;
  margin-top: 426px;
  margin-left: -39px;
}
.el-icon-switch-button {
  position: absolute;
  margin-left: 300px;
}
.tuichudenglu {
  position: absolute;
  margin-left: -40px;
  margin-top: 478px;
}
.zhuxiaozhanghao {
  position: absolute;
  margin-left: -38px;
  margin-top: 531px;
}
</style>

